<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品名称" prop="goodName">
        <el-input v-model="formData.goodName" placeholder="商品名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="toAddURL"
          v-hasPermi="['shop:coupon:add']"
        >添加
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="goodsList">
      <el-table-column label="商品id" align="center" prop="goodId"/>
      <el-table-column label="商品名称" align="center" prop="goodName"/>
      <el-table-column label="商品图片" align="center" prop="showImage">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.showImage"
            :preview-src-list="[scope.row.showImage]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品分类" :formatter="categoryFormat" align="center" prop="categoryId"/>
      <el-table-column label="是否热销" align="center" prop="isHot">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isHot"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusSwitch(scope.row,'hot')"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否新品" align="center" prop="isNew">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isNew"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusSwitch(scope.row,'new')"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" align="center" prop="isRecommend">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isRecommend"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusSwitch(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否下架" align="center" prop="soldOut">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.soldOut"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatusSwitch(scope.row,'soldOut')"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="toAddURL(scope.row.goodId)"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :hide-on-single-page="false"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @size-change="sizeChange"
      @current-change="pageChange"
    />

  </div>
</template>

<script>
import * as goodsApi from '@/api/shop/goods'
import * as categoryApi from '@/api/shop/category.js'

export default {
  name: 'GoodsIndex',
  components: {},
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        couponType: '0'
      },
      showSearch: true,
      total: 0,
      //商品列表
      goodsList: [],
      // 遮罩层
      loading: false,
      title: '',
      //提交或修改时的表单内容
      formData: {},
      categoryList: []
    }
  }
  ,
  computed: {},
  created() {
    categoryApi.categoryList().then((res) => {
      this.categoryList = res.rows
    })
    this.getList()
  }
  ,
  methods: {
    toAddURL(goodId) {
      let param={
        path: '/shop/goodsAdd'
      }
      if(typeof goodId === 'number'){
        param={
          path: '/shop/goodsUpdate',
          query:{goodId}
        }
      }
      this.$router.push(param)
    },
    categoryFormat(row) {
      try {
        return this.categoryList.filter((item) => {
          return item.categoryId == row.categoryId
        })[0].categoryName
      } catch (e) {
        return '主食'
      }

    },
    getList() {
      goodsApi.goodsList(this.queryParams).then((res) => {
        this.total = res.total
        this.goodsList = res.rows
      })
    }
    ,
    handleStatusSwitch(row, type) {
      let text = ''
      switch (type) {
        case 'new':
          text = row.isNew === 1 ? '是否设为新品' : '是否移出新品'
          break
        case 'hot':
          text = row.isHot === 1 ? '是否设为热销' : '是否移出热销'
          break
        case 'recommend':
          text = row.isRecommend === 1 ? '是否设为推荐' : '是否移出推荐'
          break
        case 'soldOut':
          text = row.soldOut === 1 ? '是否下架商品' : '是否上架商品'
          break

      }
      this.$confirm(text, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return goodsApi.updateOrSave(row)
      }).then(() => {
        this.msgSuccess(text + '成功')
      }).catch(function() {
        switch (type) {
          case 'new':
            row.isNew = row.isNew === 0 ? 1 : 0
            break
          case 'hot':
            row.isHot = row.isHot === 0 ? 1 : 0
            break
          case 'recommend':
            row.isRecommend = row.isRecommend === 0 ? 1 : 0
            break
          case 'soldOut':
            row.soldOut = row.soldOut === 0 ? 1 : 0
            break
        }

      })
    },
    sizeChange(val) {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = val
      this.getList()
    }
    ,
    pageChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
    ,
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    }
    ,
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    }
    ,
    handleDelete(row) {
      this.$confirm('确认要删除么?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return goodsApi.deleteObj(row.goodId)
      }).then(() => {
        this.msgSuccess('删除成功')
        this.getList()
      }).catch(function() {
      })
    }
    ,
    initParamData() {
      this.formData = {
        couponType: '1'
      }
    }
  }
}

</script>
<style lang="scss" scoped>

</style>
